<template>
  <div id="app">
    <m-header :seller="seller"></m-header>
    <div class="tab border-1px">
      <router-link to="/goods" class="tab-item">商品</router-link>
      <router-link to="/ratings" class="tab-item">评价</router-link>
      <router-link to="/seller" class="tab-item">商家</router-link>
    </div>
    <keep-alive>
      <router-view class="content" :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import MTab from 'components/m-tab/m-tab';
import {urlParse} from '@/common/js/util';

const ERR_OK = 0;

export default {
  data () {
    return {
      seller: {
        id: (() => {
          let queryParam = urlParse();
          return queryParam.id;
        })()
      }
    };
  },
  created () {
    this.$http.get('/api/seller?id=' + this.seller.id)
      .then((res) => {
        res = res.data;
        if (res.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, res.data);
          console.log(this.seller);
        }
      })
      .catch((err) => {
        console.log('err: ', err);
      });
  },
  components: {
    MHeader,
    MTab
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin"

  #app {
    height 100%
    .tab {
      display flex
      width 100%
      line-height 40px
      border-1px(rgba(7, 17, 27, .1))

      .tab-item {
        flex 1
        text-align center

        display block
        font-size 14px
        color rgb(77, 85, 93)
      }
      .tab-item.active {
        color rgb(240, 20, 20)
      }

    }
  }
</style>
